<template>
  <a-drawer v-model:visible="visible" title="门禁控制" placement="right" :width="450">
    <a-form ref="formRef" :model="model" :rules="rules" :label-col="{ span: 7 }" @finish="onFinish">
      <a-form-item label="门禁名称" name="name">
        {{ model.name }}
      </a-form-item>
      <a-form-item label="门禁开关状态" name="entranceState">
        <a-tag :color="model.equipmentSwitch == 0 ? '#f50' : '#2db7f5'">
          {{ model.equipmentSwitch === 0 ? '关' : '开' }}
        </a-tag>
      </a-form-item>
      <a-form-item label="操作">
        <a-button danger @click="handleControl(0)">关闭</a-button>
        <a-divider type="vertical" />
        <a-button type="primary" @click="handleControl(1)">开启</a-button>
      </a-form-item>
    </a-form>
  </a-drawer>
</template>

<script lang="ts">
import { watch, ref, nextTick, defineComponent, getCurrentInstance } from 'vue';
import { JDictSelectTag } from '/@/components/Form';
import { accessInfoApi, accessControlApi } from '/@/api/access/index';
import { controlApi, entranceInfoApi } from '/@/api/gate';
import { projectListApi } from '@/api/project';
import CommonAMap from '/@/components/CommonAMap/index.vue';
import { useUserStore } from '/@/store/modules/user';
import { deviceCameraPlayApi } from '/@/api/camera/play';
import { message } from 'ant-design-vue';
export default defineComponent({
  components: { JDictSelectTag, CommonAMap },
  setup(props, { emit }) {
    const userStore = useUserStore();
    let { proxy } = getCurrentInstance();
    let visible = ref(false);
    let model = ref({
      entranceName: '',
      entranceState: '',
      entranceCode: '',
    });
    let videoUrl = ref('');
    let regionList = ref([]);
    let rules = ref({
      name: [{ required: true, message: '请输入站点名称' }],
      contect: [{ required: true, message: '请输入联系人' }],
      stationSubtype: [{ required: true, message: '请选择站点主体类型' }],
      stationType: [{ required: true, message: '请选择站点类型' }],
      tel: [{ required: true, message: '请输入电话' }],
      mn: [{ required: true, message: '请输入设备编码' }],
      regionCode: [{ required: true, message: '请选择所在镇街' }],
    });

    let projectList = ref([]);

    function getRegionData(data: []) {
      regionList.value = data;
    }

    /**
     * 初始化数据
     * @param {number} id
     */
    function init(id) {
      videoUrl.value = '';
      accessInfoApi({ id }).then((res) => {
        model.value = { ...res };
      });
    }

    function resetForm() {
      proxy.$refs.formRef.resetFields();
    }

    /**
     * 初始化项目列表
     */
    function initProjectList() {
      projectListApi({}).then((res) => {
        projectList.value = res;
      });
    }

    function onFinish() {
      let data = {
        ...model.value,
      };
      if (!data['id']) {
        stationAddApi(data).then((res) => {
          proxy.$refs.formRef.resetFields();
          visible.value = false;
          userStore.setRequestStation();
          emit('oks');
        });
      } else {
        stationModifyApi(data).then((res) => {
          proxy.$refs.formRef.resetFields();
          visible.value = false;
          userStore.setRequestStation();
          emit('oks');
        });
      }
    }

    function handleControl(controlTo: number) {
      let { equipmentCode } = model.value;
      let data = {
        accessCode: equipmentCode,
        controlTo,
      };
      accessControlApi(data).then((res) => {
        if (res) {
          init(model.value.id);
          emit('oks');
        }
      });
    }

    /**
     * 打开地图
     */
    function openMap() {
      proxy.$refs.commonAMap.visible = true;
      nextTick(() => {
        proxy.$refs.commonAMap.initMap(model.value);
      });
    }

    watch(
      () => visible.value,
      (v) => {
        if (v) {
          initProjectList();
        }
        if (!v) {
          delete model.value.id;
          model.value = {
            // 名称
            name: '',
            // 地址
            address: '',
            // 联系人
            contect: '',
            // 经度
            longitue: 0,
            // 纬度
            latitude: 0,
            // 站点编码
            stationCode: '',
            // 站点主体类型
            stationSubtype: '',
            // 站点类型
            stationType: '',
            // 电话号码
            tel: '',
          };
        }
      },
      { deep: true }
    );

    /**
     * 获取地图返回的经纬度
     */
    function getMapData({ longitue, latitude }) {
      Object.assign(model.value, {
        longitue,
        latitude,
      });
      AMap.plugin('AMap.Geocoder', () => {
        new AMap.Geocoder().getAddress([longitue, latitude], (status, result) => {
          if (status === 'complete' && result.info === 'OK') {
            model.value.address = result.regeocode.formattedAddress;
          }
        });
      });
    }

    return {
      init,
      visible,
      model,
      rules,
      projectList,
      regionList,
      videoUrl,
      resetForm,
      onFinish,
      openMap,
      getMapData,
      getRegionData,
      handleControl,
    };
  },
});
</script>
